import { defineComponent } from 'vue'
import { useRoute } from 'vue-router'

import Info from './Info'
import MusicList from 'components/MusicList'

import useAsyncFn from 'hooks/useAsyncFn'
import songlistApis from 'apis/songlist'
import { createMusic } from 'utils/business'
import { IMusic } from 'apis/types/business'

import styles from './style.module.scss'
import { setPlayList } from '@/utils/play'
// import { ElLoading } from 'element-plus'

export default defineComponent({
  name: '',
  setup() {
    const route = useRoute()
    const songlistId = Number(route?.params?.id)

    const [state, getSonglistDetailFn] = useAsyncFn(
      songlistApis.getSonglistDetail,
    )
    getSonglistDetailFn(songlistId)

    const playAll = (autoPlay?: boolean) => {
      const songs = state.result?.songs as IMusic[]
      console.log('songs', songs)
      const list = songs.map(item => {
        return createMusic({
          ...item,
          duration: item.duration / 1000,
        })
      })
      setPlayList(list)
    }

    return () => {
      const { result, loading } = state
      const songs = result?.songs as IMusic[]
      console.log(songs)

      return (
        <>
          <div class={styles.root}>
            {loading ? (
              <spinner />
            ) : (
              <>
                <Info data={state.result?.songlist} />

                <div class={styles.content}>
                  <div class={styles.tabs}>{/* <Tabs tabs={TABS} /> */}</div>
                  {/* <el-input></el-input> */}
                  <MusicList data={songs} onPlayAll={playAll} />
                </div>
              </>
            )}
          </div>
        </>
      )
    }
  },
})
